<template>
  <div>
    <div class="top">
      <div class="top-box">
        <!-- <div class="img">
          <img :src="list.avatar" style="width: 100%; height: 100%; border-radius: 50%;" />
        </div>
        <div>
          <div class="tit">{{ list.nickname }}</div>
          <div class="name">{{ list.uid }}</div>
        </div> -->
        <div class="btn" @click="shouyi">收益明细</div>
      </div>
      <div class="yeji">
        <div class="yeji-box">小区业绩<br />{{ list.xiao_yeji }}</div>
        <div class="yeji-box">大区业绩<br />{{ list.all_yeji - list.xiao_yeji }}</div>
        <div class="yeji-box">总业绩<br />{{ list.all_yeji }}</div>
      </div>
    </div>
    <van-tabs title-active-color="#F09F5F" color="#F09F5F" ref="tabs" v-model="tabId" @click="onClick">
      <van-tab id="1" title="1级" class="text">
        <div ref="listView" style="height: 165px; overflow: hidden;">
          <p style="line-height: 165px;" v-if="xiajilist <= 0">暂无数据</p>
          <div v-else class="list" v-for="(item, index) in xiajilist" :key="index">
            <div class="list-item">
              <div class="qwe">
                <!-- <div class="a" style="display: flex;">
                <div>头像：</div>
                <div style="width: 30px; height: 30px;">
                  <img :src="item.avatar" style="width: 100%; height: 100%; border-radius: 50%;" />
                </div>
              </div> -->
                <div class="a">用户名：{{ item.nickname }}</div>
                <div class="a">ID：{{ item.uid }}</div>
                <div class="a">消费：{{ item.xiaofei }}</div>
                <div class="a">总业绩：{{ item.all_yeji }}</div>
              </div>
              <div class="qwe">
                <div class="a">手机号：{{ item.mobile }}</div>
                <div class="a">注册时间：{{ item.createtime }}</div>
                <div class="a">客户数：{{ item.zhitui }}</div>
                <div class="a">小区业绩：{{ item.xiao_yeji }}</div>
              </div>
            </div>
          </div>
        </div>
        <p v-if="xiajilist.length > 0 && !showAll" style="color: #F09F5F;margin-top: 10px;" @click="showAll = !showAll">显示更多</p>
        <p v-if="xiajilist.length > 0 && showAll" style="color: #F09F5F;margin-top: 10px;" @click="showAll = !showAll">收起</p>
      </van-tab>
      <van-tab id="2" title="2级" class="text">
        <div ref="listView" style="height: 165px; overflow: hidden;">
          <p style="line-height: 165px;" v-if="xiajilist <= 0">暂无数据</p>
          <div v-else class="list" v-for="(item, index) in xiajilist" :key="index">
            <div class="list-item">
              <div class="qwe">
                <!-- <div class="a" style="display: flex;">
                <div>头像：</div>
                <div style="width: 30px; height: 30px;">
                  <img :src="item.avatar" style="width: 100%; height: 100%; border-radius: 50%;" />
                </div>
              </div> -->
                <div class="a">用户名：{{ item.nickname }}</div>
                <div class="a">ID：{{ item.uid }}</div>
                <div class="a">消费：{{ item.xiaofei }}</div>
                <div class="a">总业绩：{{ item.all_yeji }}</div>
              </div>
              <div class="qwe">
                <div class="a">手机号：{{ item.mobile }}</div>
                <div class="a">注册时间：{{ item.createtime }}</div>
                <div class="a">客户数：{{ item.zhitui }}</div>
                <div class="a">小区业绩：{{ item.xiao_yeji }}</div>
              </div>
            </div>
          </div>
        </div>
        <p v-if="xiajilist.length > 0 && !showAll" style="color: #F09F5F;margin-top: 10px;" @click="showAll = !showAll">显示更多</p>
        <p v-if="xiajilist.length > 0 && showAll" style="color: #F09F5F;margin-top: 10px;" @click="showAll = !showAll">收起</p>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { scrollMixin } from "../../../utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      list: [],
      xiajilist: [],
      tabId: 0,
      page: 1, //分页数，当前页数
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 0, //总页数
      showAll: false
    };
  },
  watch: {
    showAll(val) {
      if (val) {
        this.$refs.listView.style.height = "auto";
        this.$refs.listView.style.overflow = "auto";
      } else {
        this.$refs.listView.style.height = "165px";
        this.$refs.listView.style.overflow = "hidden";
        window.scrollTo(0, 0);
      }
    }
  },
  activated() {
    this.qwe();
    window.scrollTo(0, 0);
  },
  mounted() {
    this.qwe();
    setTimeout(() => {
      this.$refs.tabs.resize();
    }, 1000);
  },
  // activated() {
  //   window.addEventListener("scroll", this.handleScroll);
  // },
  methods: {
    shouyi() {
      this.$router.push(this.fun.getUrl("IncomeDetailabc"));
    },
    //获取更多数据
    getMoreData() {
      console.log("hongbao", this.isLoadMore);
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          type: this.tabId + 1,
          page: this.page,
          uid: localStorage.getItem("uid")
        };
        let _url = "Yingguang.team";
        $http.post(_url, json).then(response => {
          if (response.result === 1) {
            console.log(response.data, "data");
            var nextPageData = response.data.xiaji.data;
            this.xiajilist = [...this.xiajilist, ...nextPageData];
            this.isLoadMore = true;
            console.log(this.xiajilist, "ffdfdd");
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        });
      }
    },
    initData() {
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
    },
    onClick(name, id) {
      console.log(name);
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
      this.tabId = name;
      console.log(this.tabId, "this.tabId");
      this.qwe();
    },
    qwe() {
      this.initData();
      $http
        .get("Yingguang.team", {
          type: this.tabId + 1,
          page: this.page,
          uid: localStorage.getItem("uid")
        })
        .then(response => {
          this.list = response.data;

          if (response.result === 1) {
            this.xiajilist = response.data.xiaji.data;
            // this.items = response.data.data;
            this.isLoadMore = true;
            this.total_page = response.data.xiaji.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
          }
          console.log(response.data.xiaji.data, "成功11111111");
          console.log(response, "成功11111111");
        });
    }
  }
};
</script>
<style scoped>
.a {
  margin: 8px 0px;
  font-size: 13px;
}
.qwe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.img-a {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
.top {
  width: 100%;
  /* height: 180px; */
  background-color: #F09F5F;
  padding-top: 20px;
}
.top-box {
  /* height: 80px; */
  background-color: #F09F5F;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.btn {
  width: 100px;
  height: 30px;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 10px;
  background-color: #F09F5F;
  margin-left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.tit {
  color: #e9e8ed;
  margin-left: 10px;
}
.name {
  color: #e9e8ed;
  margin-left: 10px;
}

.list-item {
  width: 90%;
  height: 165px;
  background-color: #fff;
  border-radius: 20px;
  margin: auto;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.yeji {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.yeji-box {
  width: 30%;
  height: 80px;
  color: aliceblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
